<!DOCTYPE html>
<html lang="zh-CN">
<#include "../common/head.ftl">
<body>
<#--<#include "../common/menu.ftl">-->

<div class="container">
<#--<#include "../common/banner.ftl">-->
    <div class="panel panel-default panel-col">
        <div class="panel-heading">
            <h4 class="text text-info">
            <#if (user.id)??>修改用户<#else>添加用户</#if>
            </h4>
        </div>
        <div class="panel-body">
            <a class="btn btn-primary" href="/user/list">返回到列表</a>
            <p></p>
            <form id="user-update-form" action="/user/save" method="post" enctype="multipart/form-data">
                <input type="hidden" name="id" value="${(user.id)!}"/>

                <div class="form-group">
                    <label for="username">姓名</label>
                    <input type="text" class="form-control" id="username" name="username" value="${(user.username)!}"
                           reg="^.{2,20}$" tip="请输入2到20个字符">
                    <span class="text text-danger"></span>
                </div>
                <div class="form-group">
                    <label for="age">年龄</label>
                    <input type="text" class="form-control" id="age" name="age" value="${(user.age)!}" reg="^\d{1,3}$"
                           tip="请输入1到3位的数字">
                    <span class="text text-danger"></span>
                </div>
                <div class="form-group">
                    <label for="birthday">出生日期</label>
                    <div class="input-group date form_date col-md-5" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                        <input class="form-control" size="16" type="text" id="birthday" name="birthday" value="${((user.birthday)?string("yyyy-MM-dd"))!}" readonly>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                    <input type="hidden" id="dtp_input2" value="" />
                </div>
                <div class="form-group">
                    <label for="address">住址</label>
                    <input type="text" class="form-control" id="address" name="address" value="${(user.address)!}"
                           reg="^.{1,50}$" tip="请输入1到20个字符">
                    <span class="text text-danger"></span>
                </div>
                <div class="form-group">
                    <label for="gender">性别</label>
                    <div class="form-control">
                        <label class="radio-inline">
                            <input type="radio" id="gender1" name="gender" value="1" <#if (user.gender)?? && user.gender == 1>checked</#if> > 男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" id="gender2" name="gender" value="2" <#if (user.gender)?? && user.gender == 2>checked</#if> > 女
                        </label>
                    </div>
                    <span class="text text-success" id="span-gender"></span>
                </div>
                <div class="form-group">
                    <label for="phone">手机号码</label>
                    <input type="text" class="form-control" id="phone" name="phone" value="${(user.phone)!}"
                           reg="^\d{11}$" tip="请输入11位数字">
                    <span class="text text-danger"></span>
                </div>

                <div class="form-group">
                    <label for="headImg">头像</label>
                    <#if user??>
                        <p>
                            <img id="headimgid" src="${(user.headimg)!}" width="150" height="150">
                            <a href="#" class="modifyImages"><i class="glyphicon glyphicon-edit"></i></a>
                            <input type="hidden" class="form-control" id="headimg" name="headimg" value="${(user.headimg)!}">
                        </p>
                    <#else>
                        <input type="file" class="form-control" id="headimg" name="headimg">
                    </#if>
                    <span class="text text-danger"></span>
                </div>

                <!-- 使用Form的submit方法来提交表单 -->
                <button type="submit" class="btn btn-primary">保存</button>
                <!-- 给按钮绑定click事件的方式来提交表单 -->
                <#--<input type="button" id="saveBtn" class="btn btn-primary" value="保存" />-->
            </form>
        </div>
    </div>
</div>
</div>
<#include "../common/footer.ftl">
<script>
    $(function () {
        $('.form_date').datetimepicker({
            language: 'zh-CN',
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0
        });

        // 编辑头像
        $(".modifyImages").on('click', function () {
            $("#headimgid").remove();
            $(this).remove();
            $("#headimg").attr("type", "file");
            return false;
        })

        /**
         * 使用form的submit事件提交表单
         */
        $('#user-update-form').submit(function(){
            var isSubmit = true;
            $('#user-update-form input').each(function(){
                var obj = $(this);
                var val = obj.val();
                var reg = obj.attr('reg');
                var tip = obj.attr('tip');
                var regExp = new RegExp(reg);
                if (!regExp.test(val)) {
                    //校验未通过
                    isSubmit = false;
                    obj.next().html(tip);
                    //如果有一项没有校验通过就跳出each循环
                    return false;
                }
            });
            return isSubmit;
        });

        /** 失去焦点时 */
        $('#user-update-form input').blur(function () {
            var obj = $(this);
            //获得焦点是改变输入框的背景色
            var val = obj.val();
            var reg = obj.attr('reg');
            var tip = obj.attr('tip');
            var regExp = new RegExp(reg);
            if (!regExp.test(val)) {
                //校验未通过
                obj.next().html(tip);
            } else {
                obj.next().html('');
            }
        });
    })
</script>
</body>
</html>